<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-布局组件</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!--
            el-container
               el-header
                     el-container
                       el-aside
                       el-main
                       el-aside
               el-footer
            el-container
        -->
        <el-container>
            <el-header style="height: 150px;background-color: #5daf34"></el-header>
            <el-container>
                <el-asider style="width: 200px;background-color: #3a8ee6"></el-asider>
                <el-main style="height: 700px;background-color: #909399"></el-main>
                <el-asider style="width: 200px;background-color: #e6a23c"></el-asider>
            </el-container>
            <el-footer style="height: 150px;background-color: #dd6161"></el-footer>
        </el-container>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        });
    </script>
</body>
</html>